<template>
  <div class="login-page">
    <el-form
      ref="loginForm"
      status-icon
      label-width="120px"
      class="demo-loginFormData"
    >
      <img src="../../assets/video/GIF.video.gif" alt="" />

      <div class="container">
        <!-- 背景块 -->
        <div class="circlre" style="--x: 0"></div>
        <div class="circlre" style="--x: 1"></div>
        <div class="circlre" style="--x: 2"></div>
        <div class="circlre" style="--x: 3"></div>
        <div class="circlre" style="--x: 4"></div>

        <h1 class="title">{{ pageInfo.title }}</h1>

        <i @click="lyType" :class="['jiaobiao', 'iconfont', jiaobiao]"></i>
        <!-- 常规登录组件 -->
        <component
          :is="pageInfo.component"
          v-if="LyType === 'common'"
        ></component>
        <!-- 短信登入 -->
        <!-- <smsLogin></smsLogin> -->
        <!-- 二维码登录 -->
        <lyLogin v-else="LyType === 'lycode'" />
        <div class="toggle">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-iphone"></use>
          </svg>
          <b @click="handToggle">{{ pageInfo.toggleDes }}</b>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script setup>
import { ref, watchEffect, markRaw, onMounted } from "vue";
import commonLogin from "../../components/login/commonLogin.vue";
import smsLogin from "../../components/login/smsLogin.vue";
import lyLogin from "../../components/login/lyLogin.vue";

let pageInfo = ref({
  title: "crm系统",
  loginType: "common",
  toggleDes: "点击切换手机登入",
  component: markRaw(commonLogin),
});

let jiaobiao = "icon-erweimajiaobiao";

let LyType = "common";

let isType = ref(true);
let lyType = () => {
  console.log(pageInfo._rawValue.loginType);

  isType.value = !isType.value;
};
console.log(pageInfo._rawValue.loginType);

let isCommonLogin = ref(true);
let handToggle = () => {
  isCommonLogin.value = !isCommonLogin.value;
};

console.log(jiaobiao);

watchEffect(() => {
  console.log(999);
  if (isCommonLogin.value) {
    pageInfo.value = {
      title: "crm系统",
      loginType: "common",
      toggleDes: "点击切换手机登录",
      component: markRaw(commonLogin),
    };
  } else {
    pageInfo.value = {
      title: "短信登入",
      loginType: "sms",
      toggleDes: "使用用户密码登录",
      component: markRaw(smsLogin),
    };
  }
  if (isType.value) {
    pageInfo.value = {
      loginType: "lycode",
      component: markRaw(lyLogin),
    };
  }
  if (pageInfo._rawValue.loginType === "common") {
    return (jiaobiao = "icon-erweimajiaobiao");
  }
  if (pageInfo._rawValue.loginType === "lycode") {
    return (jiaobiao = "icon-diannaojiaobiao");
  }
});
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  box-shadow: 0 0 10px 1px white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 10px;
  width: 350px;
  padding: 20px;
  height: 350px;
  overflow: hidden;
  background-color: rgba(17, 16, 16, 0.2);
  :deep(.icon) {
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
  }
}
.btn {
  background: linear-gradient(90deg, #1596fb, #002dff);
  border-radius: 6px;
  width: 200px;
  margin-right: 50px;
}
img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -3;
}
b {
  color: white;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  font-style: oblique;
}
.toggle {
  margin-left: 30px;
  display: flex;
  align-items: center;
}
.title {
  margin-left: 40px;
  color: aquamarine;
}
.circlre {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  box-shadow: 0 25px 45px rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  filter: hue-rotate(calc(var(--x) * 80deg));
  animation: animate 10s linear infinite;
  animation-delay: calc(var(--x) * -2s);
}
@keyframes animate {
  0%,
  100% {
    transform: translateY(-50px);
  }
  50% {
    transform: translateY(50px);
  }
}
.circlre:nth-child(1) {
  top: 26%;
  right: 580px;
  width: 100px;
  height: 100px;
  z-index: -2;
}
.circlre:nth-child(2) {
  top: 450px;
  right: 1010px;
  width: 120px;
  height: 120px;
  z-index: 2;
}
.circlre:nth-child(3) {
  bottom: 380px;
  right: 600px;
  width: 70px;
  height: 70px;
  z-index: 2;
}
.circlre:nth-child(4) {
  bottom: 290px;
  left: 730px;
  width: 60px;
  height: 60px;
  z-index: -2;
}
.circlre:nth-child(5) {
  top: 250px;
  left: 800px;
  width: 60px;
  height: 60px;
  z-index: 2;
}
.jiaobiao {
  font-size: 70px;
  position: absolute;
  z-index: 5;
  cursor: pointer;
}
.icon-erweimajiaobiao:before,
.icon-diannaojiaobiao::before {
  position: absolute;
  top: -198px;
  left: 125px;
  color: #008b45;
}
</style>
